<!-- 接待登记页 -->
<template>
  <div style="margin: 20px;">
    <el-breadcrumb separator="/" style="line-height:35px">
      <el-breadcrumb-item><span style="color: #7A7A7A;">服务管理</span></el-breadcrumb-item>
      <el-breadcrumb-item><span style="color: #7A7A7A;">接待管理</span></el-breadcrumb-item>
      <el-breadcrumb-item><span style="color: #0468FF;font-weight: bold">接待登记</span></el-breadcrumb-item>
    </el-breadcrumb>
  </div>

  <!-- 搜索卡片 -->
  <el-card style="margin:20px;height: 70px;border: 0 solid #f0f2f5" shadow="never">
    <el-form :inline="true">
      <el-form-item label="咨询人手机号">
        <el-input placeholder="请输入内容"
                  v-model="searchForm.phone"
                  style="width:220px;"></el-input>
      </el-form-item>
      <el-form-item label="接待时间" style="width:290px;">
        <el-date-picker
            type="date"
            placeholder="请选择日期"
            value-format="YYYY-MM-DD HH:mm:ss"
            format="YYYY-MM-DD"
            v-model="searchForm.date"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button @click="resetSearch">重置</el-button>
        <el-button @click="loadReception" type="primary">查询</el-button>
      </el-form-item>
      <el-button type="primary" style="float:right;" v-on:click="beforeAddReception">新建接待</el-button>
    </el-form>
  </el-card>

  <!-- 接待列表 -->
  <el-card style="margin:20px;border: 0" shadow="never">
    <el-table :data="currentTableData" height="550px"
              :row-style="{'height':'50px'}"
              :cell-style="{'color':'#000'}"
              :header-cell-style="{
                'background-color': '#f2f2f2',
                'color': '#000',
                'height':'50px'
              }">
      <el-table-column prop="name" label="咨询人" width="120" align="center"/>
      <el-table-column prop="phone" label="咨询人手机号" align="center"/>
      <el-table-column prop="reception" label="接待人员" align="center"/>
      <el-table-column prop="way" label="咨询途径" align="center"/>
      <el-table-column prop="createTime" label="接待时间" align="center"/>
      <el-table-column prop="tag" label="标签" align="center">
        <template #default="scope">
          <el-tag :type="handleTagType(scope.row.tag)" hit style="width: 70px;font-size: 12px">
            {{ scope.row.tag }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button link type="primary" size="small" @click="editReception(scope.row.id)">编辑</el-button>
          <el-button link type="danger" size="small" @click="deleteReception(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="dataTable.length"
        style="margin-top: 20px;margin-left: 5px;"
    />
  </el-card>


  <!-- 新建和编辑弹窗 -->
  <el-dialog v-model="dialogVisible"
             align-center
             center
             :before-close="handleClose"
             style="width:auto;height: auto;padding: 50px 80px;">
    <template #header="{ close, titleId, titleClass }">
      <div>
        <span class="dialog-title">{{ dialogTitle }}</span>
      </div>
    </template>
    <el-form label-width="100px" label-position="right" status-icon>
      <el-form-item label="咨询人姓名">
        <el-input placeholder="请输入咨询人姓名" v-model="saveForm.name"></el-input>
      </el-form-item>
      <el-form-item label="咨询人电话">
        <el-input placeholder="请输入咨询人电话" v-model="saveForm.phone"></el-input>
      </el-form-item>
      <el-form-item label="接待人员">
        <el-input placeholder="请输入接待人员" v-model="saveForm.reception"></el-input>
      </el-form-item>
      <el-form-item label="咨询途径">
        <el-select v-model="saveForm.way" placeholder="请选择" style="width: 500px;margin-left: 40px;">
          <el-option label="电话" value="1"></el-option>
          <el-option label="现场" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="标签">
        <el-select v-model="saveForm.tag" placeholder="请选择" style="width: 500px;margin-left: 40px;">
          <el-option label="日间托管" value="日间托管"></el-option>
          <el-option label="护理" value="护理"></el-option>
          <el-option label="居家照料" value="居家照料"></el-option>
          <el-option label="看诊陪同" value="看诊陪同"></el-option>
          <el-option label="其他" value="其他"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="handleClose" style="margin-right:40px;">取消</el-button>
      <el-button @click="" type="primary">确定</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import {onMounted, ref} from "vue";

//保存搜索信息
const searchForm = ref({phone: '', date: ''});

//重置搜索框
const resetSearch = () => {
  searchForm.value = {phone: '', date: ''};
  loadReception();
}

//表格数据
const dataTable = ref([
  {
    name: '张三',
    phone: '13800001111',
    reception: '李四',
    way: '电话',
    createTime: '2025-03-26 15:27:54',
    tag: '日间托管'
  },
  {name: '张三', phone: '13800001111', reception: '李四', way: '电话', createTime: '2025-03-26 15:27:54', tag: '护理'},
  {
    name: '张三',
    phone: '13800001111',
    reception: '李四',
    way: '电话',
    createTime: '2025-03-26 15:27:54',
    tag: '居家照料'
  },
  {
    name: '张三',
    phone: '13800001111',
    reception: '李四',
    way: '电话',
    createTime: '2025-03-26 15:27:54',
    tag: '看诊陪同'
  },
  {name: '张三', phone: '13800001111', reception: '李四', way: '电话', createTime: '2025-03-26 15:27:54', tag: '其他'},
  {
    name: '张三',
    phone: '13800001111',
    reception: '李四',
    way: '电话',
    createTime: '2025-03-26 15:27:54',
    tag: '日间托管'
  },
  {name: '张三', phone: '13800001111', reception: '李四', way: '电话', createTime: '2025-03-26 15:27:54', tag: '护理'},
  {
    name: '张三',
    phone: '13800001111',
    reception: '李四',
    way: '电话',
    createTime: '2025-03-26 15:27:54',
    tag: '居家照料'
  },
  {
    name: '张三',
    phone: '13800001111',
    reception: '李四',
    way: '电话',
    createTime: '2025-03-26 15:27:54',
    tag: '看诊陪同'
  },
  {name: '张三', phone: '13800001111', reception: '李四', way: '电话', createTime: '2025-03-26 15:27:54', tag: '其他'},
  {
    name: '张三',
    phone: '13800001111',
    reception: '李四',
    way: '电话',
    createTime: '2025-03-26 15:27:54',
    tag: '日间托管'
  },
  {name: '张三', phone: '13800001111', reception: '李四', way: '电话', createTime: '2025-03-26 15:27:54', tag: '护理'},
  {
    name: '张三',
    phone: '13800001111',
    reception: '李四',
    way: '电话',
    createTime: '2025-03-26 15:27:54',
    tag: '居家照料'
  },
  {
    name: '张三',
    phone: '13800001111',
    reception: '李四',
    way: '电话',
    createTime: '2025-03-26 15:27:54',
    tag: '看诊陪同'
  },
  {name: '张三', phone: '13800001111', reception: '李四', way: '电话', createTime: '2025-03-26 15:27:54', tag: '其他'},
]); // 原始数据
const currentTableData = ref([]) // 当前页显示的数据
const currentPage = ref(1)      // 当前页码
const pageSize = ref(10)        // 每页条数

// 获取数据（示例）
const fetchData = async () => {
  // 这里替换为你的API请求
  // dataTable.value = await api.getData();
  updateCurrentData();
}

// 更新当前页数据
const updateCurrentData = () => {
  const start = (currentPage.value - 1) * pageSize.value
  const end = start + pageSize.value
  currentTableData.value = dataTable.value.slice(start, end)
}

// 每页条数变化
const handleSizeChange = (val) => {
  pageSize.value = val
  updateCurrentData()
}

// 页码变化
const handleCurrentChange = (val) => {
  currentPage.value = val
  updateCurrentData()
}

// 生命周期钩子
onMounted(() => {
  fetchData()
})

//加载表格数据
const loadReception = () => {

}

//控制新增车辆弹窗是否显示
const dialogVisible = ref(false);
//定义变量控制dialog的标题
const dialogTitle = ref('新增接待');

//点击新建按钮时执行的方法
const beforeAddReception = () => {
  dialogTitle.value = '新增接待';
  dialogVisible.value = true;
}

//点击编辑后执行的方法
const editReception = (id) => {
  dialogTitle.value = '编辑';
  dialogVisible.value = true;
}
//删除
const deleteReception = (id) => {
  if (confirm('确定要删除这条记录吗?')) {
  }
}

//保存弹窗表单的数据
const saveForm = ref({name: '', phone: '', reception: '', way: '', tag: ''})

//处理弹窗关闭的方法
const handleClose = () => {
  dialogVisible.value = false;
  saveForm.value = {name: '', phone: '', reception: '', way: '', tag: ''};
}

//根据标签选择类型
const handleTagType = (tag) => {
  switch (tag) {
    case '日间托管':
      return 'primary';
    case '护理':
      return 'success';
    case '居家照料':
      return 'warning';
    case '看诊陪同':
      return 'danger';
    case '其他':
      return 'info';
  }
}
</script>

<style scoped>
* {
  font-family: 'Microsoft YaHei UI', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 14px;
}

.dialog-title {
  font-size: 22px;
  font-weight: bold;
  color: #000;
}


.el-dialog .el-form-item {
  margin: 30px 0;
  --el-text-color-regular: #000;
}

.el-dialog .el-input {
  margin-left: 40px;
  width: 500px;
}

</style>